<script setup>
import * as echarts from 'echarts/core'
import { ToolboxComponent,TooltipComponent,GridComponent,LegendComponent } from 'echarts/components'
import { LineChart } from 'echarts/charts'
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import { ref,onMounted,onUnmounted } from 'vue'
echarts.use([
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  LineChart,
  CanvasRenderer,
  UniversalTransition
]);
const chartRef = ref(null)
const getMap = () => {//获取柱状图
  const myChart = echarts.init(chartRef.value,null,{
    renderer:'canvas',
    useDirtyRect:false
  });
  const option = {
    color:["#00f2f1", "#ed3f35"],
    tooltip: {
    trigger: 'axis'
    },
    legend: {
      textStyle:{
        color:"#4c9bfd"
        },
      right:"10%"
    },
    grid: { 
      top: '20%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      show: true,// 显示边框
      borderColor: '#012f4a',// 边框颜色
      containLabel: true // 包含刻度文字在内
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      axisTick: {
      show: false // 去除刻度线
      },
      axisLabel: {
        color: '#4c9bfd',// 文本颜色
        fontSize:8
      },
      axisLine: {
        show: false // 去除轴线
      },
      boundaryGap: false, // 去除轴内间距
    },
    yAxis: {
      type: 'value',
      axisTick: {
      show: false // 去除刻度
      },
      axisLabel: {
      color: '#4c9bfd' // 文字颜色
      },
      splitLine: {
        lineStyle: {
        color: '#012f4a' // 分割线颜色
        }
      }
    },
    series: [
      {
        name:'新增粉丝',
        data: [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
        type: 'line',
        smooth: true
      },
      {
        name:'新增游客',
        data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
        type: 'line',
        smooth: true
      }
    ]
  };
  myChart.setOption(option);
  window.addEventListener('resize', myChart.resize);
}
onMounted(async()=>{
  await getMap()
})
onUnmounted(() => {
  if (myChart) {
    window.removeEventListener('resize', handleResize); // 移除事件监听
    myChart.dispose(); // 销毁图表实例
    myChart = null; // 释放引用
  }
});

</script>
<template>
<div class="bartu" ref="chartRef">

</div>
</template>
<style scoped lang="less">
.bartu{
  height:240px;
}
</style>